<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script>!function(e,t){var n=t.documentElement,d=e.devicePixelRatio||1;function i(){var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){e.persisted&&i()}),2<=d){var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)</script>
    <style>
        html,body,ul,li,p{margin: 0;padding: 0;list-style: none;}
        .map{position:absolute;top:0;left:0;right:0;bottom:0;background: #f5f5f5;}
        .top-option{position: absolute;top:0;margin:0;padding:0.1rem 0.16rem;width:100%;box-sizing:border-box;background: #fff;box-shadow: 0 0 0.03rem rgba(0,0,0,0.3);}
        .searchBar{display: flex;align-items: center;}
        .searchBar>span{display: block;margin-right:0.08rem;font-size: 0.12rem;line-height: 0.24rem;color: #252525;}
        .searchBox{flex: 1 1;padding: 0 0.1rem;height:0.24rem;border: 0.01rem solid #dcdcdc;border-radius: 0.12rem;}
        .searchBox>input{display:block;margin: 0;padding: 0;width: 100%;font-size: 0.14rem;line-height: 0.24rem;color:#252525;background: transparent;border: none;outline: none;}
        .optBox{ position: absolute; top: 0.46rem;left: 0; padding: 0.04rem;}
        .rankBtn{position: relative;display:flex;line-height:0.2rem;padding:0.02rem 0.06rem;border-radius: 0.1rem;font-size: 0.12rem;color: #252525;background: #fff;justify-content: center;box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,0.3);}
        .rankBtn:before{content: "";display: block;height: 0.2rem;width: 0.2rem;background: url("") no-repeat;background-size: contain;}
        .rankBox{display:none;position: absolute;top:0.8rem;left:0.04rem;padding:0.03rem 0.06rem;border-radius:0.06rem;background:#fff;box-shadow: 0 0 0.03rem rgba(0,0,0,0.3);}
        .rankBox:before{content: "";position:absolute;top:-0.05rem;left:0.1rem;display:block;height: 0;width: 0;border-top:none;border-left: 0.05rem solid transparent;border-right:0.05rem solid transparent;border-bottom: 0.05rem solid #fff;}
        .rankBox>li{position:relative;display: flex;height:0.32rem;line-height:0.32rem;justify-content: space-between;align-content: center;font-size: 0.13rem;}
        .rankBox>li:not(:last-child):after{content: "";position:absolute;bottom:0;width: 100%;height: 1px;background:#dcdcdc;transform: scale(1,0.5);transform-origin: top center;}
        .rankBox>li>span{margin-right:0.08rem;font-size: 0.14rem;color: #4c4c4c;font-weight: bold;}
        .rankBox>li:first-child>span{color: rgb(226,51,82);font-size: 0.2rem;}
        .rankBox>li:nth-child(2)>span{color: rgb(255,172,102);font-size: 0.18rem;}
        .rankBox>li:nth-child(3)>span{color: rgb(234,207,54);font-size: 0.16rem;}
        .rankBox>li b{margin: 0 0.04rem;}
    </style>
</head>
<body>
    <div id="container" class="map"></div>
    <div class="top-option">
        <div class="searchBar">
            <span>搜索</span>
            <div class="searchBox">
                <input id="searchIpt" class="top-tool-search" type="text" placeholder="请输入搜索地点">
            </div>
        </div>
    </div>
    <div class="optBox">
    	<div class="rankBtn" id="rankBtn"><span>火力排行</span></div>
    </div>
    <ul class="rankBox" id="rank">
    	
    </ul>
</body>
<script type="text/javascript" src="../../script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=uP59t9Cm2UEufkiPU1fv8jB2XN1e8mZY&services=&t=20200309163354"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uP59t9Cm2UEufkiPU1fv8jB2XN1e8mZY"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="../../script/thermodynamic.js"></script>
</html>